<template>
  <view v-if="visible" class="vp-mask" @click.self="emit('close')">
    <view class="vp-card">
      <video class="vp-video" :src="src" controls></video>
      <button class="vp-close" @click="emit('close')">关闭</button>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  visible: { type: Boolean, default: false },
  src: { type: String, default: '' }
})
const emit = defineEmits(['close'])
</script>

<style lang="scss" scoped>
.vp-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.38); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.vp-card { background: #000; border-radius: 12px; padding: 10px; width: 86%; max-width: 420px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); display:flex; flex-direction:column; gap:10px; }
.vp-video { width: 100%; height: 220px; }
.vp-close { background: linear-gradient(135deg, #ff0050, #ff4081); color:#8b4513; border:none; border-radius: 18px; padding:8px 14px; font-size: 13px; font-weight: 600; }
</style>
